<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { listByIds } from "@/api/oss";

const props = defineProps({
  title: {
    type: String,
    default: '音频文件'
  },
  ossid: {
    type: [String, Number],
    required: true
  },
  originalName: {
    type: String,
    default: ''
  }
});

const fileUrl = ref('');
const originalName = ref('');
const loading = ref(true);
const durationText = ref('');

// 使用ossid获取文件URL
const fetchFileUrl = async () => {
  try {
    loading.value = true;
    const response = await listByIds(props.ossid.toString());
    if (response && response.data && response.data.length > 0) {
      fileUrl.value = response.data[0].url;
      originalName.value = response.data[0].originalName;
    }
  } catch (error) {
    console.error('获取音频文件URL失败:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchFileUrl();
});

watch(fileUrl, () => {
  if (!fileUrl.value) return;
  const a = document.createElement('audio');
  a.preload = 'metadata';
  a.src = fileUrl.value;
  a.onloadedmetadata = () => {
    const d = Math.floor(a.duration || 0);
    const mm = String(Math.floor(d / 60)).padStart(2, '0');
    const ss = String(d % 60).padStart(2, '0');
    durationText.value = `${mm}:${ss}`;
  };
});

const playAudio = () => {
  if (fileUrl.value) {
    // 创建audio元素播放音频
    const audio = new Audio(fileUrl.value);
    audio.play().catch(error => {
      console.error('音频播放失败:', error);
      // 如果播放失败，则在新窗口打开
      window.open(fileUrl.value, '_blank');
    });
  }
};
</script>

<template>
	<div class="audio-item" @click="playAudio">
		<div class="card">
			<div class="left">
				<div class="circle">
					<img src="~/assets/audio-fll.png" alt="" />
				</div>
			</div>
			<div class="right">
				<p class="title">{{ originalName || props.title }}</p>
				<p class="meta">时长: {{ durationText || '00:00' }}</p>
				<div class="wave"></div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.audio-item {
  width: 384px;
  margin-right: 24px;
  margin-bottom: 24px;
  cursor: pointer;
}

.audio-item:nth-child(3n) {
  margin-right: 0;
}

.card {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(25,30,40,0.08);
  box-shadow: 0 0 16px rgba(11,13,18,0.06);
  border-radius: 16px;
  padding: 16px;
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 20px rgba(11,13,18,0.12);
  transform: translateY(-2px);
}

.left {
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e8f9f5 0%, #f4fbf9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 24px;
    height: 24px;
  }
}

.right {
  flex: 1;
}

.title {
  font-size: 14px;
  color: #191e28;
  margin: 0 0 6px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.meta {
  font-size: 12px;
  color: rgba(25,30,40,0.48);
  margin-bottom: 8px;
}

.wave {
  height: 24px;
  border-radius: 6px;
  background: repeating-linear-gradient(
    to right,
    rgba(25,30,40,0.08) 0,
    rgba(25,30,40,0.08) 6px,
    transparent 6px,
    transparent 12px
  );
}
</style>